<template>
  <basic-container>
    <div class="dbbaseConfig">
      <!-- <div class="header_">
        <div
          class="config"
          :class="{ config_active: activeConfig === 1 }"
          @click="changeType(1)"
        >
          数据库配置
        </div>
   
      </div> -->

      <div class="con_">
        <avue-crud
          :option="dbbaseConfigOption"
          v-if="activeConfig === 1"
          :table-loading="loading"
          :data="tableData"
          @selection-change="(v) => $set(this, 'selection', v)"
          @current-change="currentChange"
          @size-change="sizeChange"
          ref="crud"
          :page.sync="page"
        >
          <template slot="menuLeft" slot-scope="scope">
            <el-button
              :size="scope.size"
              @click="
                addToTabsList('数据库', { oid: -1 }, 'dbbaseTemp', 'open')
              "
            >
              配置数据库
            </el-button>
            <el-button
              :size="scope.size"
              @click="enableRowBatch(true)"
              >启用</el-button
            >
            <el-button
              :size="scope.size"
              @click="enableRowBatch(false)"
              >禁用</el-button
            >
          </template>

          <template slot-scope="{ row }" slot="name">
            <span
              class="column-btn"
              @click="
                addToTabsList(row.name + '数据库', row, 'dbbaseTemp', 'view')
              "
            >
              {{ row.name }}
            </span>
          </template>

          <template slot="menu" slot-scope="{ row }">
            <el-button type="text" @click="testLink(row)"> 测试连接 </el-button>
            <el-button
              type="text"
              @click="addToTabsList('数据库', row, 'dbbaseTemp', 'edit')"
            >
              修改
            </el-button>
            <el-button type="text" @click="del(row)">删除</el-button>
            <el-button
              type="text"
              v-if="row.enableState === 0"
              @click="enableRow(row.oid, true)"
              >启用</el-button
            >
            <el-button
              type="text"
              v-if="row.enableState === 1"
              @click="enableRow(row.oid, false)"
              >禁用</el-button
            >
          </template>
        </avue-crud>
      </div>
    </div>

    <ms-drawer
      @refresh="getPage()"
      ref="md"
      :visible.sync="visible"
      :tab-list.sync="tabsList"
    ></ms-drawer>
  </basic-container>
</template>

<script>
import * as api from "@/api/dbbaseConfig/index";

export default {
  name: "dbbaseConfig",
  inject: ["dbbaseConfigOption", "dataSourceConfigOption"],
  data() {
    return {
      activeConfig: 1,

      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tableData: [],
      selection: [],
      loading: false,

      visible: false,
      tabsList: [],
      idKey: "oid",
    };
  },
  methods: {
   
    enableRow(data, bool) {
      let apiMethod = bool ? "startUsing" : "stopUsing";
      let info = bool ? "启用" : "禁用";
      api[apiMethod]({ ids: data }).then((res) => {
        if (res.data.data) {
          this.$message.success(`${info}成功!`);
        } else {
          this.$message.error(`${info}失败!`);
        }
        this.getPage();
      });
    },
     enableRowBatch(bool){
      if(this.selection.length === 0 ){
        this.$message.info("请选择数据库!");
        return
      }
      const idStr=this.selection.map(v=>(v.oid)).join(',');
      this.enableRow(idStr,bool)
    },
    testLink(data) {
      api.queryConnection({ ...data }).then((res) => {
        if (res.data.data) {
          this.$message.success("可用");
        } else {
          this.$message.error("不可用");
        }
        this.getPage();
      });
    },
    changeType(type) {
      this.activeConfig = type;
    },
    del(row) {
      this.$confirm("是否删除").then(() => {
        api.del({ oid: row.oid }).then(() => {
          this.getPage();
        });
      });
    },

    getPage() {
      api.page(this.page.currentPage, this.page.pageSize).then((res) => {
        const { totalRows, list } = res.data.data;
        this.tableData = list;
        this.page.total = totalRows;
      });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getPage();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getPage();
    },
    // 向抽屉中添加tab页 根据 oid 去重
    addToTabsList(title, row, component, type) {
      let ids = this.tabsList.map((item) => item.row[this.idKey]);
      if (!ids.includes(row[this.idKey])) {
        this.tabsList.push({ title, row, component, type });
      }
      this.visible = true;
    },
  },
  mounted() {
    this.getPage();
  },
};
</script>

<style scoped lang="scss">
.dbbaseConfig {
  $Header_height: 60px;

  .header_ {
    height: $Header_height;
    width: 100%;
    background: #f2f2f2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    padding: 0 10px;

    .config {
      padding: 0 10px;
      margin: 15px 5px;
      line-height: 30px;
      height: 30px;
      border-radius: 5px;
      cursor: pointer;
    }

    .config_active {
      background: white;
    }
  }

  .con_ {
    height: calc(100% - #{$Header_height} - 10px);
    width: 100%;
    margin-top: 10px;
  }
}
</style>
